<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/htmlHead :: common_header(~{::title})">
    <link rel="stylesheet" th:href="@{/webjars/mdui/dist/css/mdui.css}">
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script th:src="@{/webjars/mdui/dist/js/mdui.js}"></script>
    <title>Shiqi群聊</title>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- 侧边栏  -->
    <head th:replace="~{common/sidebar}">

        <!-- Page Content  -->
        <div id="content-page" class="content-page">

            <!-- 导航栏 -->
            <div class="iq-top-navbar header-top-sticky">
                <div class="iq-navbar-custom">
                    <div class="iq-sidebar-logo">
                        <div class="top-logo">
                            <a href="index.html" class="logo">
                                <img src="images/logo.png" class="img-fluid" alt="">
                                <span>Shiqi</span>
                            </a>
                        </div>
                    </div>
                    <nav class="navbar navbar-expand-lg navbar-light p-0">
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <i class="ri-menu-3-line"></i>
                        </button>
                        <div class="iq-menu-bt align-self-center">
                            <div class="wrapper-menu">
                                <div class="main-circle"><i class="ri-more-fill"></i></div>
                                <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                            </div>
                        </div>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav ml-auto navbar-list">
                                <li class="nav-item">
                                    <a class="search-toggle iq-waves-effect language-title" th:text="#{main.language}">
                                        语言 <i class="ri-arrow-down-s-line"></i></a>
                                    <div class="iq-sub-dropdown">
                                        <a class="iq-sub-card" th:href="@{/getUserInfo(l='zh_CN')}">
                                            <img th:src="@{/images/small/ch.png}" alt="img-flaf" class="img-fluid mr-2">
                                            简体中文
                                        </a>
                                        <a class="iq-sub-card" th:href="@{/getUserInfo(l='en_US')}">
                                            <img th:src="@{/images/small/en.png}" alt="img-flaf" class="img-fluid mr-2">
                                            English
                                        </a>
                                    </div>
                                </li>
                                <li class="nav-item iq-full-screen">
                                    <a href="#" class="iq-waves-effect" id="btnFullscreen"><i
                                            class="ri-fullscreen-line"></i></a>
                                </li>
                            </ul>
                        </div>
                        <ul class="navbar-list">
                            <li>
                                <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                                    <img src="images/user/1.jpg" class="img-fluid rounded mr-3" alt="user">
                                    <div class="caption">
                                        <h6 class="mb-0 line-height">[[${session.loginUser}]]</h6>
                                        <span class="font-size-12" th:text="#{main.Available}">Available</span>
                                    </div>
                                </a>
                                <div class="iq-sub-dropdown iq-user-dropdown">
                                    <div class="iq-card shadow-none m-0">
                                        <div class="iq-card-body p-0 ">
                                            <div class="bg-primary p-3">
                                                <h5 class="mb-0 text-white line-height"><span th:text="#{main.Hello}">Hello</span>
                                                    [[${session.loginUser}]]</h5>
                                                <span class="text-white font-size-12" th:text="#{main.Available}">Available</span>
                                            </div>
                                            <!--修改个人信息-->
                                            <a th:href="@{/topro-edit}" class="iq-sub-card iq-bg-primary-hover">
                                                <div class="media align-items-center">
                                                    <div class="rounded iq-card-icon iq-bg-primary">
                                                        <i class="ri-profile-line"></i>
                                                    </div>
                                                    <div class="media-body ml-3">
                                                        <h6 class="mb-0 " th:text="#{main.upMyInfo}">Edit Profile</h6>
                                                        <p class="mb-0 font-size-12" th:text="#{main.upMyInfoDes}">
                                                            Modify your personal details.</p>
                                                    </div>
                                                </div>
                                            </a>
                                            <!--注销-->
                                            <div class="d-inline-block w-100 text-center p-3">
                                                <a class="bg-primary iq-sign-btn" th:href="@{/logout}"
                                                   role="button">注销<i class="ri-login-box-line ml-2"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>

                </div>
            </div>
            <!-- 导航栏结束 -->

            <!--聊天页面-->
            <div class="col-lg-12 chat-data p-0 chat-data-right">
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="chatbox1" role="tabpanel">
                        <div class="chat-head">
                            <header class="d-flex justify-content-between align-items-center pt-3 pr-3 pb-3">
                                <div class="d-flex align-items-center">

                                    <div class="avatar chat-user-profile m-0 mr-3">
                                        <img src="images/user/05.jpg" alt="avatar" class="avatar-50 rounded">
                                        <span class="avatar-status"><i
                                                class="ri-checkbox-blank-circle-fill text-success"></i></span>
                                    </div>
                                    <h5 class="mb-0">沟通大厅</h5>
                                </div>
                                <div class="chat-user-detail-popup scroller">
                                    <div class="user-profile text-center">
                                        <button type="submit" class="close-popup p-3"><i class="ri-close-fill"></i>
                                        </button>
                                        <div class="user mb-4">
                                            <a class="avatar m-0">
                                                <img src="images/user/05.jpg" alt="avatar">
                                            </a>
                                            <div class="user-name mt-4"><h4>Bini Jordan</h4></div>
                                            <div class="user-desc"><p>Cape Town, RSA</p></div>
                                        </div>
                                        <hr>
                                        <div class="chatuser-detail text-left mt-4">
                                            <div class="row">
                                                <div class="col-6 col-md-6 title">Bini Name:</div>
                                                <div class="col-6 col-md-6 text-right">Bini</div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-6 col-md-6 title">Tel:</div>
                                                <div class="col-6 col-md-6 text-right">072 143 9920</div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-6 col-md-6 title">Date Of Birth:</div>
                                                <div class="col-6 col-md-6 text-right">July 12, 1989</div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-6 col-md-6 title">Gender:</div>
                                                <div class="col-6 col-md-6 text-right">Male</div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-6 col-md-6 title">Language:</div>
                                                <div class="col-6 col-md-6 text-right">Engliah</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </header>
                        </div>
                        <div class="chat-content scroller" id="message">
                            <div th:each="item:${chatList}">
                                <div class="chat" th:if="${item.getName()} == ${session.loginUser}">
                                    <div class="chat-user">
                                        <a class="avatar m-0">
                                            <img src="images/user/1.jpg" alt="avatar" class="avatar-35 rounded ">
                                        </a>
                                        <span class="chat-time mt-1" th:text="${item.getName()}"></span>
                                    </div>
                                    <div class="chat-detail">
                                        <div class="chat-message">
                                            <p th:text="${item.getMes()}"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat chat-left" th:if="${item.getName()} != ${session.loginUser}">
                                    <div class="chat-user">
                                        <a class="avatar m-0">
                                            <img src="images/user/05.jpg" alt="avatar" class="avatar-35 rounded ">
                                        </a>
                                        <span class="chat-time mt-1" th:text="${item.getName()}"></span>
                                    </div>
                                    <div class="chat-detail">
                                        <div class="chat-message">
                                            <p th:text="${item.getMes()}"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-footer p-3 bg-white">
                            <form class="d-flex align-items-center" action="javascript:void(0);">
                                <!--<div class="chat-attagement d-flex">
                                    <a href="javascript:void();"><i class="fa fa-smile-o pr-3" aria-hidden="true"></i></a>
                                    <a href="javascript:void();"><i class="fa fa-paperclip pr-3" aria-hidden="true"></i></a>
                                </div>-->
                                <input id="text" type="text" class="form-control mr-3" placeholder="输入消息" required="required">
                                <button onclick="send()" type="submit" class="btn btn-primary d-flex align-items-center
                                p-2"><i class="fa fa-paper-plane-o" aria-hidden="true"></i><span
                                        class="d-none d-lg-block ml-1">Send</span></button>
                            </form>
                        </div>
                    </div>
                    <br/>
                    <!--                    <div id="message"></div>-->
                </div>
            </div>

            <!-- 脚部 -->
            <footer th:replace="~{common/footer}"></footer>
            <!-- 脚部结束 -->

        </div>

    </head>
</div>
<!-- Wrapper END -->
<!--使用公有js-->
<div th:replace="common/htmlHead::common_js(~{::script})">

</div>
</body>
<script type="text/javascript">
    var websocket = null;

    window.onload = function () {
        conectWebSocket()
    }

    function conectWebSocket() {
        var nickname = "[[${session.loginUser}]]";
        if (nickname === "") {
            alert("请重新登录");
            return;
        }
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8083/websocket/" + nickname);
        } else {
            alert('拾柒温馨提示：浏览器不支持聊天，请跟换浏览器')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("拾柒温馨提示: 成功建立连接");
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            setMessageInnerHTML(event.data);
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("拾柒温馨提示:关闭连接");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        var index = innerHTML.indexOf(":")
        if (innerHTML.substring(0, index) == "拾柒温馨提示") {
            document.getElementById('message').innerHTML += innerHTML + "</br>"
        } else if (innerHTML.substring(0, index) == "[[${session.loginUser}]]") {
            document.getElementById('message').innerHTML += '<div class="chat">\n' +
                '                                <div class="chat-user">\n' +
                '                                    <a class="avatar m-0">\n' +
                '                                        <img src="images/user/1.jpg" alt="avatar" class="avatar-35 rounded ">\n' +
                '                                    </a>\n' +
                '                                    <span class="chat-time mt-1">' + innerHTML.substring(0, index) + '</span>\n' +
                '                                </div>\n' +
                '                                <div class="chat-detail">\n' +
                '                                    <div class="chat-message">\n' +
                '                                        <p>' + innerHTML.substring(index + 1, innerHTML.length) + '</p>\n' +
                '                                    </div>\n' +
                '                                </div>\n' +
                '                            </div>';
        } else {
            document.getElementById('message').innerHTML += '<div class="chat chat-left">\n' +
                '                                <div class="chat-user">\n' +
                '                                    <a class="avatar m-0">\n' +
                '                                        <img src="images/user/05.jpg" alt="avatar" class="avatar-35 rounded ">\n' +
                '                                    </a>\n' +
                '                                    <span class="chat-time mt-1">' + innerHTML.substring(0, index) + '</span>\n' +
                '                                </div>\n' +
                '                                <div class="chat-detail">\n' +
                '                                    <div class="chat-message">\n' +
                '                                        <p>' + innerHTML.substring(index + 1, innerHTML.length) + '</p>\n' +
                '                                    </div>\n' +
                '                                </div>\n' +
                '                            </div>'
        }

    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        if (message.trim() == "") {
            return;
        }
        websocket.send(message);
    }
</script>
</html>
